<template>
  <div style="width: 100%; height: 100%">
    <!-- 执行步骤信息-->
    <el-row>
      <el-col :span="5" style="height: 800px">
        <el-table
          :data="FFilterList"
          border
          :row-class-name="tableRowClassName"
          @row-click="onFilterRowClick"
        >
          <el-table-column prop="FOrderNo" label="序号" width="60">
          </el-table-column>
          <el-table-column prop="FFilterCaption" label="参数标签" width="120">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="19">
        <el-row>
          <el-button @click="getFields()">跟据表名获取条件</el-button>
          <el-button @click="appendFilter()">新增条件</el-button>
          <el-button @click="delFilter()">删除条件</el-button>
          <el-button @click="upFilter()">上移条件</el-button>
          <el-button @click="downFilter()">下移条件</el-button>
          <el-button @click="clearFilter()">清除条件</el-button>
        </el-row>
        <el-row>
          <template v-if="isShow()">
            <div class="my-block">
              <!-- 模块信息 -->
              <table border="1">
                <colgroup>
                  <col style="width: 16rem; max-width: 16rem" />
                  <col style="width: 32rem" />
                  <col style="width: 16rem; max-width: 16rem" />
                  <col style="width: 32rem" />
                  <col style="width: 16rem; max-width: 16rem" />
                  <col style="width: 32rem" />
                </colgroup>
                <tbody>
                  <tr>
                    <td class="title">
                      <span style="color: red"> * </span>步骤节点
                    </td>
                    <td>
                      <el-input
                        disabled
                        v-model="FIndexData.FTreeCode"
                      ></el-input>
                    </td>
                    <td class="title">
                      <span style="color: red"> * </span>步骤名称
                    </td>
                    <td colspan="3">
                      <el-input
                        disabled
                        v-model="FIndexData.FDataCaption"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <div style="height: 20px"></div>
                  </tr>
                  <tr>
                    <td class="title">
                      <span style="color: red"> * </span>序号
                    </td>
                    <td>
                      <el-input v-model="FIndexFilter.FOrderNo"></el-input>
                    </td>
                    <td class="title">
                      <span style="color: red"> * </span>标签
                    </td>
                    <td colspan="3">
                      <el-input
                        v-model="FIndexFilter.FFilterCaption"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">
                      <span style="color: red"> * </span>条件名称
                    </td>
                    <td>
                      <el-input v-model="FIndexFilter.FFilterName"></el-input>
                    </td>
                    <td class="title">
                      <span style="color: red"> * </span>Json名称
                    </td>
                    <td>
                      <el-input
                        v-model="FIndexFilter.FFilterJsonName"
                      ></el-input>
                    </td>
                    <td class="title">
                      <span style="color: red"> * </span>数据字段
                    </td>
                    <td>
                      <el-input v-model="FIndexFilter.FFilterField"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">数据类型</td>
                    <td>
                      <el-select
                        v-model="FIndexFilter.FFilterDataType"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in FDataTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >{{ item.value }}</span
                          >
                        </el-option>
                      </el-select>
                    </td>
                    <td class="title">数据格式</td>
                    <td>
                      <el-input v-model="FIndexFilter.FFilterFormat"></el-input>
                    </td>
                    <td class="title">条件符号</td>
                    <td>
                      <el-select
                        v-model="FIndexFilter.FFilterExpression"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in FFilterExpression"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >{{ item.value }}</span
                          >
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">必需条件</td>
                    <td align="center">
                      <el-switch
                        v-model="FIndexFilter.FFilterbMust"
                      ></el-switch>
                    </td>
                    <td class="title">必需有值</td>
                    <td align="center">
                      <el-switch
                        v-model="FIndexFilter.FFilterbValue"
                      ></el-switch>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">取值类别</td>
                    <td>
                      <el-select
                        v-model="FIndexFilter.FFilterDefaultType"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in FFilterValueType"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >{{ item.value }}</span
                          >
                        </el-option>
                      </el-select>
                    </td>
                    <td class="title">取值类别值</td>
                    <td>
                      <el-select
                        v-model="FIndexFilter.FFilterDefaultValue"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in FFilterDefaultValue"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >{{ item.value }}</span
                          >
                        </el-option>
                      </el-select>
                    </td>
                    <td class="title">自定义值</td>
                    <td>
                      <el-input
                        v-model="FIndexFilter.FFilterDefaultValue"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">输出参数</td>
                    <td align="center">
                      <el-switch v-model="FIndexFilter.FbOutParam"></el-switch>
                    </td>
                    <td class="title">输出成功值</td>
                    <td>
                      <el-input v-model="FIndexFilter.FOutTrueValue"></el-input>
                    </td>
                    <td class="title">输出消息</td>
                    <td align="center">
                      <el-switch v-model="FIndexFilter.FIsOutMsg"></el-switch>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">条件模式</td>
                    <td colspan="5">
                      <el-select
                        v-model="FIndexFilter.FFilterMode"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in FFilterMode"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                          <span style="float: left">{{ item.label }}</span>
                          <span
                            style="
                              float: right;
                              color: #8492a6;
                              font-size: 13px;
                            "
                            >{{ item.value }}</span
                          >
                        </el-option>
                      </el-select>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">自定义SQL</td>
                    <td colspan="5">
                      <el-input
                        type="textarea"
                        rows="5"
                        v-model="FIndexFilter.FFilterSQL"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">多字段或多值</td>
                    <td colspan="2">
                      <el-input
                        v-model="FIndexFilter.FFilterItemsType"
                        type="textarea"
                        rows="5"
                        placeholder="一行一个值"
                      ></el-input>
                    </td>
                    <td class="title">值选择SQL</td>
                    <td colspan="2">
                      <el-input
                        v-model="FIndexFilter.FFilterItemsValue"
                        type="textarea"
                        rows="5"
                        placeholder="一行一个值"
                      ></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="title">用户ID字段</td>
                    <td colspan="2">
                      <el-input
                        v-model="FIndexFilter.FFilterUserIDField"
                        placeholder="一行一个值"
                      ></el-input>
                    </td>
                    <td class="title">用户代码字段</td>
                    <td colspan="2">
                      <el-input
                        v-model="FIndexFilter.FFilterUserCodeField"
                        placeholder="一行一个值"
                      ></el-input>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </template>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script  lang="ts">
import {
  constHelper,
  evenDels,
  TModuleDataSet,
  TModuleFilter,
} from "@/baselib/module/BaseClass";
import { Options, Vue } from "vue-class-component";
//配合着用
@Options({})
export default class TFrmModuleFilterList extends Vue {
  private _FIndexData: TModuleDataSet = new TModuleDataSet();
  public FOnDel?: evenDels;
  public get FIndexData(): TModuleDataSet {
    return this._FIndexData;
  }
  public set FIndexData(qIndexData: TModuleDataSet) {
    this._FIndexData = qIndexData;
    this.FFilterList = this._FIndexData.filterList;
    if (this.FFilterList.length > 0) {
      this.FIndexFilter = this.FFilterList[0];
    } else {
      this.FIndexFilter = new TModuleFilter();
      this.FIndexFilter.FFilterCaption = "展示数据无效,请用新增参数";
    }
  }
  private FFilterList: TModuleFilter[] = []; //执行步骤数
  private FIndexFilter: TModuleFilter = new TModuleFilter(); //当前选中的执行步骤
  private FDataTypeList: any[] = constHelper.TMyDataType;
  private FFilterExpression: any[] = constHelper.TMyFilterExpression;
  private FFilterValueType: any[] = constHelper.TMyValueDefaultType;
  private FFilterDefaultValue: any[] = constHelper.TMyValueDefaultValue;
  private FFilterMode: any[] = constHelper.TMyFilterMode;
  public created() {}
  //
  private onFilterRowClick(row: TModuleFilter) {
    this.FIndexFilter = row;
  }
  private isShow(): boolean {
    if (
      !this.$myStrHelper.stringIsEmptyYW(this.FIndexFilter.FFilterID) ||
      !this.$myStrHelper.stringIsEmptyYW(this.FIndexFilter.myTempID)
    ) {
      return true;
    }
    return false;
  }
  private tableRowClassName(row: any): string {
    let lTemp = row.row as TModuleFilter;
    if (!this.$myStrHelper.stringIsEmptyYW(this.FIndexFilter.FFilterID)) {
      if (lTemp.FFilterID == this.FIndexFilter.FFilterID) {
        return "success-row";
      }
    }
    if (!this.$myStrHelper.stringIsEmptyYW(this.FIndexFilter.myTempID)) {
      if (lTemp.myTempID == this.FIndexFilter.myTempID) {
        return "success-row";
      }
    }

    return "";
  }

  private getFields() {}
  private appendFilter() {
    var tempFilter = new TModuleFilter();
    tempFilter.myTempID = this.$myStrHelper.getGUID();
    tempFilter.FOrderNo = this.FFilterList.length + 1;
    this.FFilterList.push(tempFilter);
    this.FIndexFilter = tempFilter;
  }
  private delFilter() {
    let tempI = -1;
    for (var i = this.FFilterList.length - 1; i >= 0; i--) {
      var item = this.FFilterList[i];
      if (!this.$myStrHelper.stringIsEmpty(this.FIndexFilter.FFilterID)) {
        if (item.FFilterID == this.FIndexFilter.FFilterID) {
          tempI = i;
          this.FFilterList.splice(i, 1);
          if (this.FOnDel != undefined) {
            this.FOnDel(item.FFilterID);
          }
          break;
        }
      } else {
        if (item.myTempID == this.FIndexFilter.myTempID) {
          tempI = i;
          this.FFilterList.splice(i, 1);
          break;
        }
      }
    }
    if (tempI >= 0) {
      if (this.FFilterList.length == 0) {
        this.FIndexFilter = new TModuleFilter();
      } else if (this.FFilterList.length > tempI) {
        this.FIndexFilter = this.FFilterList[tempI];
      } else {
        this.FIndexFilter = this.FFilterList[tempI - 1];
      }
    }
  }
  private upFilter() {
    if (this.FFilterList.length <= 1) {
      return;
    }
    if (this.FIndexFilter == undefined) {
      return;
    }
    var tempIndex = -1;
    for (var i = this.FFilterList.length - 1; i >= 0; i--) {
      var item = this.FFilterList[i];
      if (!this.$myStrHelper.stringIsEmpty(this.FIndexFilter.FFilterID)) {
        if (item.FFilterID == this.FIndexFilter.FFilterID) {
          tempIndex = i;
          break;
        }
      } else {
        if (item.myTempID == this.FIndexFilter.myTempID) {
          tempIndex = i;
          break;
        }
      }
    }
    if (tempIndex > 0) {
      var lUp = this.FFilterList[tempIndex - 1];
      var lNow = this.FFilterList[tempIndex];
      var lUpOrder = lUp.FOrderNo;
      lUp.FOrderNo = lNow.FOrderNo;
      lNow.FOrderNo = lUpOrder;
      this.FFilterList[tempIndex - 1] = lNow;
      this.FFilterList[tempIndex] = lUp;
    }
  }
  private downFilter() {
    if (this.FFilterList.length <= 1) {
      return;
    }
    if (this.FIndexFilter == undefined) {
      return;
    }
    var tempIndex = -1;
    for (var i = this.FFilterList.length - 1; i >= 0; i--) {
      var item = this.FFilterList[i];
      if (!this.$myStrHelper.stringIsEmpty(this.FIndexFilter.FFilterID)) {
        if (item.FFilterID == this.FIndexFilter.FFilterID) {
          tempIndex = i;
          break;
        }
      } else {
        if (item.myTempID == this.FIndexFilter.myTempID) {
          tempIndex = i;
          break;
        }
      }
    }
    if (tempIndex < this.FFilterList.length - 1) {
      var lUp = this.FFilterList[tempIndex + 1];
      var lNow = this.FFilterList[tempIndex];
      var lUpOrder = lUp.FOrderNo;
      lUp.FOrderNo = lNow.FOrderNo;
      lNow.FOrderNo = lUpOrder;
      this.FFilterList[tempIndex + 1] = lNow;
      this.FFilterList[tempIndex] = lUp;
    }
  }
  private clearFilter() {
    for (var i = this.FFilterList.length - 1; i >= 0; i--) {
      if (this.FOnDel != undefined) {
        this.FOnDel(this.FFilterList[i].FFilterID);
      }
      this.FFilterList.splice(i, 1);
    }
  }
}
</script>
<style>
table {
  border-collapse: collapse;
}

table,
table tr td {
  border: 1px solid #ccc;
}

.title {
  background-color: #d9d9d9;
  padding-left: 10px;
}
</style>
